<script setup>
import { Edit, Delete } from '@element-plus/icons-vue'
import { ref,computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import AdminChart from '@/components/AdminChart.vue'
import {  getNoticeService} from '../../api/notice'
import {getTeacherService} from '../../api/teacher'
import {getStudentService} from '../../api/student'
import {getCourseService} from '../../api/course'
import {getAllUserDataService} from '../../api/user'
const notices = ref([])
const reverse = ref(true)


const list = async () => {
  let res = await getNoticeService()
  notices.value = res.data
  // 获取教师、学生和课程数据
  let teacherRes = await getTeacherService()
  let studentRes = await getStudentService()
  let courseRes = await getCourseService()
  let userDataRes = await getAllUserDataService()
  // 更新卡片信息中的计数
  cardItems.value[0].count = teacherRes.data.length 
  cardItems.value[1].count = studentRes.data.length 
  cardItems.value[2].count = courseRes.data.length; 
  cardItems.value[3].count = userDataRes.data.length; 
}

const cardItems = ref([
  { title: '教师数量', count: 0, icon: '👨‍🏫' }, 
  { title: '学生数量', count: 0, icon: '👩‍🎓' }, 
  { title: '课程数量', count: 0, icon: '📚' }, 
  { title: '管理员数量', count: 0, icon: '📝' }, 
])
list()
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="div-card">
        <el-card class="box-card">
          <h2 style="margin-top: 0px;">通知列表</h2>
        <el-timeline :reverse="reverse" style="padding-left: 0px;">
      <el-timeline-item
        v-for="(notice, index) in notices"
        :key="index"
        :timestamp="notice.createAt">
        {{notice.title}}
        </el-timeline-item>
     </el-timeline>
      </el-card>
       <!-- 添加卡片 -->
       <div class="card-container">
          <el-card class="card" v-for="(item, index) in cardItems" :key="index">
            <div class="card-content">
              <div class="icon">{{ item.icon }}</div>
              <div class="title">{{ item.title }}</div>
              <div class="count">{{ item.count }}</div>
            </div>
          </el-card>
        </div>
      </div>
    </template>
    <AdminChart />
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .div-card {
    width: 100%;
    display: flex;
    gap: 20px; /* 添加间隔 */
  }

  .card-container {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: space-between; /* 使卡片之间留有间隔 */
    max-width: 800px; /* 设置最大宽度以控制每行的数量 */
  }

  .card {
    height: 130px;
    width: 38%; /* 卡片宽度，确保在两列中显示 */
    margin-bottom: 10px; /* 添加底部间距以分隔行 */
    text-align: center;
    border-radius: 10px;
    padding: 20px;
    background-color: #f0f0f0; /* 卡片背景色 */
  }
  .icon {
    font-size: 30px; /* 图标大小 */
  }
  .title {
    font-weight: bold; /* 标题加粗 */
    margin-top: 10px;
  }
  .count {
    font-size: 34px; /* 数字大小 */
    color: #42b983; /* 数字颜色 */
    margin-top: 5px;
  }
  .box-card {  
    margin-right: 100px;
  width:400px;
}
}
</style>
